<template>
  <div class="course-root">
    <p class="title">班主任请假审批</p>
    <el-table :data="leaveList" style="width: 100%;margin-top: 30px;">
      <el-table-column prop="id" label="请假单号" width="200" />
      <el-table-column prop="studentId" label="学生学号" width="200" />
      <el-table-column prop="reason" label="事由" width="560" />

      <el-table-column fixed="right" label="操作" min-width="160">
        <template #default="{ row }">
          <el-button type="danger" plain size="small" @click="handleDisapproval(row)" v-if="row.status == 0">
            驳回
          </el-button>
          <el-button type="success" plain size="small" @click="handlePass(row)" v-if="row.status == 0">
            批准
          </el-button>
          <el-button type="default" plain disabled size="small" v-if="row.status == 1">
            待辅导员审批
          </el-button>
          <el-button type="success" plain disabled size="small" v-if="row.status == 2">
            已通过审核
          </el-button>
          <el-button type="danger" plain disabled size="small" v-if="row.status == 3">
            已驳回
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { inject, onMounted, reactive, ref } from "vue";
import { ElMessageBox } from "element-plus";
// import BigNumber from 'bignumber.js';
const message = inject("message");
import axios from "../utils/http.ts"
const leaveList = ref([])
import { useUserStore } from "../store/user.ts";
const userStore = useUserStore();
const loadData = async () => {
  const res = await axios.get(`/user/headTeacherGetList/${userStore.user.id}`);
  if (res.success) {
    console.log(res.result, "源数据")
    // 假设 API 返回的数据是一个包含 ID 的列表
    // const res1 = res.result.map(item => {
    //   // 避免丢失精度，保持 ID 作为字符串
    //   return {
    //     ...item,
    //     studentName: co // 确保 ID 是字符串
    //   };
    // });
    // console.log(res1, "处理后")
    leaveList.value = res.result;
    console.log("名单", leaveList.value)
  }
}



const getNameById = async (id) => {
  const res = await axios.get(`/user/getTeacherNameById/${id}`);
  if (res.success) {
    return res.result;
  }
}
const courseIdToDrop = ref(0);
// const handleDrop = (row) => {
//   courseIdToDrop.value = row.course.courseId;
//   // return;
//   ElMessageBox.confirm(
//     '确定退选课程?',
//     '提示',
//     {
//       confirmButtonText: '确定',
//       cancelButtonText: '取消',
//     }
//   )
//     .then(() => {
//       dropCourse();
//     })
//     .catch(() => {
//       return;
//     })
// }

// const dropCourse = async () => {
//   const res = await axios.post(`/user/noChooseCourse/${userStore.user.id}/${courseIdToDrop.value}`);
//   if (res.success) {
//     message.success(res.message);
//     loadData();
//   }
// }




const leaveId = ref(0)
const handlePass = async (row) => {
  console.log(row)
  leaveId.value = row.id;
  const res = await axios.post(`/user/headTeacherCheck/${leaveId.value}/true`);
  if (res.success) {
    message.success("已通过！");
    loadData();
  }
}

const handleDisapproval = async (row) => {
  leaveId.value = row.id;
  const res = await axios.post(`/user/headTeacherCheck/${leaveId.value}/false`);
  if (res.success) {
    message.success("已驳回!");
    loadData();
  }
}


onMounted(() => {
  loadData();
})
</script>

<style lang="scss" scoped>
.course-root {
  display: flex;
  flex-direction: column;
  padding: 20px;
  padding-top: 30px;
  height: 100%;
  width: 100%;

  .title {
    border-left: 3px solid var(--el-color-primary);
    padding-left: 10px;
    height: 16px;
    line-height: 16px;
    font-weight: 600;
    color: var(--el-menu-text-color);
  }

  .el-table:deep(.el-table__row) {
    height: 56px;
  }
}
</style>